/**
 * Created by kurry on 2017/8/21.
 */
import { Modal, Button,Form, message,Upload, Icon,Input} from 'antd';
import React from 'react';
import 'antd/dist/antd.css';
import '../less/teacher.less';
const FormItem = Form.Item;
const TextArea = Input.TextArea;
class ModalComponent extends React.Component {
  state = {
    loading: false,
    visible: false,
  };

  //控制modal,取消显示

  handleCancel = () => {
    this.setState({ visible: false });
    this.props.callbackParent(false);
  };

  //表单控制函数们
  //第一次提交
  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        console.log('Received values of form: ', values);
      }
    });
  };
  componentWillReceiveProps(props){
    console.log(props);
    this.setState({
      visible: props.isModalVisible
    })
  }

  //上传返回函数
  normFile = (e) => {
    console.log('Upload event:', e);
    if (Array.isArray(e)) {
      return e;
    }
    return e && e.fileList;
  }

  render() {
    console.log(this);
    const { visible, loading } = this.state;
    //获取装饰器
    const { getFieldDecorator } = this.props.form;
    // 表单的布局
    const formItemLayout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 14 },
    };


    //电话号码校验



    return (
      <div>
        <Modal
          visible={visible}
          title={<span style={{fontWeight:'bolder',fontSize:'16px'}}>{this.props.modalTitle == 'newOne' ? '新增项' : this.props.modalTitle}</span>}
          wrapClassName="vertical-center-modal"
          onOk={this.handleOk}
          onCancel={this.handleCancel}
          footer={[
            <Button key="back" size="large" onClick={()=>{
              this.props.callbackParent(false);
            }}>取消</Button>,
            <Button key="submit" type="primary" size="large" loading={loading} onClick={()=>{
              this.props.callbackParent(false);
            }}>
              确定
            </Button>,
          ]}
        >
          <Form onSubmit={this.handleSubmit}>

            {/*姓名*/}
            <FormItem
              {...formItemLayout}
              label="姓名"
              hasFeedback
            >
              {getFieldDecorator('name', {
                rules: [{
                  required: true,
                  message: '请输入此老师姓名',
                }],
              })(
                <Input placeholder="请输入此老师姓名" />
              )}
            </FormItem>

            {/*电话*/}
            <FormItem
              {...formItemLayout}
              label="电话"
              hasFeedback
            >
              {getFieldDecorator('phone', {
                rules: [{ required: true, message: '请输入此老师的电话号码' }],
              })(
                <Input style={{ width: '100%' }} />
              )}
            </FormItem>


            {/*邮箱*/}
            <FormItem
              {...formItemLayout}
              label="邮箱"
              hasFeedback
            >
              {getFieldDecorator('email', {
                rules: [{
                  type: 'email', message: '邮箱格式错误!',
                }, {
                  required: true, message: '请输入此老师的邮箱',
                }],
              })(
                <Input placeholder="@"/>
              )}
            </FormItem>

            {/*微信*/}

            <FormItem
              {...formItemLayout}
              label="微信号"
              hasFeedback
            >
              {getFieldDecorator('wxAccount', {
                rules: [{
                  required: true,
                  message: '请输入此老师的微信号',
                }],
              })(
                <Input placeholder="请输入此老师的微信号" />
              )}
            </FormItem>

            {/*头像*/}

            <FormItem
              {...formItemLayout}
              label="头像"
            >
              {getFieldDecorator('upload', {
                valuePropName: 'fileList',
                getValueFromEvent: this.normFile,
              })(
                <Upload
                  name="avatar"
                  action="//jsonplaceholder.typicode.com/posts/"
                  listType="picture"
                  data={(file)=> console.log(file)}
                  onChange={(info)=>{
                   console.log(info);
                   const status = info.file.status;
                   if (status !== 'uploading') {
                     console.log(info.file, info.fileList);
                   }
                   if (status === 'done') {
                     message.success(`${info.file.name} file uploaded successfully.`);
                   } else if (status === 'error') {
                     message.error(`${info.file.name} file upload failed.`);
                   }
                 }}
                >
                  <Button>
                    <Icon type="upload" /> 点击上传此老师的头像
                  </Button>
                </Upload>
              )}
            </FormItem>


            {/*微信二维码*/}

            <FormItem
              {...formItemLayout}
              label="微信二维码"
            >
              {getFieldDecorator('upload', {
                valuePropName: 'fileList',
                getValueFromEvent: this.normFile,
              })(
                <Upload name="wxQrCode" action="/upload.do" listType="picture">
                  <Button>
                    <Icon type="upload" /> 点击上传此老师的微信二维码
                  </Button>
                </Upload>
              )}
            </FormItem>
            {/*简介*/}
            <FormItem
              {...formItemLayout}
              label="简介"
              hasFeedback
            >
              {getFieldDecorator('classBriefing', {
                rules: [{required: true, message: '请输入此老师的简介!', whitespace: true}]
              })(
                <TextArea placeholder="请输入此老师的简介"/>
              )}
            </FormItem>

          </Form>
        </Modal>
      </div>
    );
  }
}

// 将props压缩到fields里，更新系列的信息
function mapPropsToFields(props) {
  console.log(props);
  return {

  }
}

export default Form.create({mapPropsToFields})(ModalComponent);

